<template>
  <view class="body">
    <view
      class="img-view"
      v-if="!showSwiper"
    >
      <image :src="imgUrls[0]"></image>
    </view>

    <view class="small-img">
      <image :src="imgUrls[1]"></image>
      <view class="uni-title">
        <view class="nichen">
          <text class="name">文文文文</text>
        </view>
        <view class="showmy">介绍一下你自己
          <text
            @tap="SET_NAME"
            class="lmqicon uni-icon-biji"
          ></text>
        </view>
      </view>
    </view>
    <!-- <view style="height:65px;background:#fff"></view> -->
    <view class="uni-padding-wrap uni-common-mt">
      <!-- <view class="grace-list">
         <navigator class='items'>
                    <view class="title">基本资料</view>
                    <view class="arrow-right"></view>
                </navigator>
      </view>-->
      <view class="uni-title uni-title_1">
        <view class="paddingmyshow paddingmyshow_1">基本资料
          <text class="lmqicon uni-icon-leftjiantou2"></text>
        </view>
        <view class="paddingmyshow">速付宝账号
          <view>注册时候的手机号</view>
        </view>
        <view class="paddingmyshow">真实姓名
          <view class="xingm">认证后的姓名</view>
        </view>
        <view class="paddingmyshow">性别
          <view class="xingm xingm_sex">女</view>
        </view>
        <view class="paddingmyshow">国家地区
          <view class="xingm">阿根廷的某个地方</view>
        </view>
        <view class="paddingmyshow paddingmyshow_more">更新更多资料,方便大家找到你</view>
        <!-- <view v-if="show_more_more">
          <view class="paddingmyshow">速付宝账号
            <view>注册时候的手机号</view>
          </view>
          <view class="paddingmyshow">真实姓名
            <view class="xingm">认证后的姓名</view>
          </view>
        </view>-->
      </view>
    </view>
    <view class="phto">
      <view
        @tap="handleMore(true)"
        class="phto_1"
      >
        <image src="../../../static/yfb/my/xiangji@2x.png"></image>
        <text>立即发布动态</text>
        <text class="lmqicon uni-icon-leftjiantou2"></text>
      </view>
      <!-- <view @tap="handleMore(true)" class="photo_2">
        <text class="lmqicon uni-icon-xiangji photo_two"></text>
      </view>-->
    </view>

    <!-- 开始 -->
    <!-- <view
      v-if="!imageSrc"
      class="pickphoto"
     >记录更多照片后,将在此处出现</view> -->

    <!-- 后台服务器传过来的图片 -->
    <!-- <template v-if="imageSrc">
      <view
        class="demo pickphoto"
        v-for="(item,index) in imageSrc"
        :key="index"
      >
        <image
          @tap="ceshiyulan"
          :src="item"
          class="image"
          mode="widthFix"
        ></image>
      </view>
    </template> -->
    <!-- 结束 -->

    <!-- 个人生活朋友圈 -->
    <view
      class="grace-padding"
      v-for="(item,index_1) in 2"
      :key="index_1"
    >

      <view class="Personal-circle">

        <view class="myinfo-date">
          <view class="my-tx">
            <image src="../../../static/yfb/my/touxiang.jpg"></image>
          </view>
          <view class="my-date-name">
            <view>文文文文文</view>
            <!-- <view>{{new Date().toLocaleString()}}</view> -->
            <view>2018-12-04 14:22</view>
          </view>
        </view>
        <view style="border-bottom: 1px solid rgba(223,221,223,1);margin-left:-4%"></view>
        <view class="dynamic-life">
          <view class="my-xinqing">上帝给你关上一扇门，还会用门夹你的脑袋。</view>
          <view class="circle-iamge">
            <scroll-view
              class="grace-scroll-x"
              scroll-x
            >
              <view
                v-for="(item,index) in 10"
                class="grace-items"
                :key="index"
              >
                <view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view style="border-bottom: 1px solid rgba(223,221,223,1);margin-top:22upx;"></view>
        </view>
        <view class="praise">
          <view><text class="zan"></text> 赞</view>
          <view><text class="pinglun"></text> 评论</view>
        </view>
      </view>
    </view>

    <!-- 个人生活朋友圈结束 -->

    <!-- <view style="height: 1000upx;"></view> -->
    <uniPopup
      :show="moreShow"
      type="bottom"
      @hidePopup="handleMore(false)"
    >
      <view
        class="popup-item"
        @tap="ceshiyulan"
      >记录生活</view>
      <view
        class="popup-item border"
        @tap="Video_pictures"
      >视频/拍照</view>
      <view
        class="popup-item border"
        @tap="choose_photo"
      >从相册选择</view>
      <view
        class="popup-item border-none"
        @click="handleMore(false)"
      >取消</view>
    </uniPopup>
  </view>
</template>

<script>
import uniPopup from "@/components/lmqpopup";
export default {
  components: { uniPopup },
  data() {
    return {
      showSwiper: false,
      imgUrls: [
        "../../../static/yfb/my/jx@2x.png",
        "../../../static/yfb/my/touxiang.jpg"
      ],
      moreShow: false,
      imageSrc: "",
      show_more_more: false,
      name: "未设置昵称"
    };
  },
  methods: {
    SET_NAME() {
      this.name = "测试林";
    },
    show_more() {
      console.log(this.show_more_more);
      this.show_more_more = !this.show_more_more;
      console.log(this.show_more_more);
    },
    radioChange(e) {
      this.showSwiper = e.detail.value === "swiper";
    },
    handleMore(b1) {
      this.moreShow = b1;
    },
    Video_pictures() {
      console.log(123);
      uni.chooseImage({
        sourceType: ["camera"], //从相机选择
        success: function(res) {
          console.log(JSON.stringify(res.tempFilePaths));
        }
      });
    },
    ceshiyulan() {
      uni.previewImage({
        urls: this.imageSrc
      });
    },
    choose_photo() {
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: res => {
          console.log(
            "chooseImage success, temp path is",
            res.tempFilePaths[0]
          );
          var imageSrc = res.tempFilePaths[0];
          var imageSrc1 = res.tempFilePaths;
          console.log(typeof imageSrc1);
          console.log("​imageSrc1", imageSrc1);

          uni.uploadFile({
            url: "https://unidemo.dcloud.net.cn/upload",
            // files:imageSrc1,
            filePath: imageSrc1,
            fileType: "image",
            // name: 'data',
            success: res => {
              console.log("uploadImage success, res is:", res);
              uni.showToast({
                title: "上传成功",
                icon: "success",
                duration: 1000
              });
              this.imageSrc = imageSrc1;
              this.moreShow = !this.moreShow;
            },
            fail: err => {
              console.log("uploadImage fail", err);
              uni.showModal({
                content: err.errMsg,
                showCancel: false
              });
            }
          });
        },
        fail: err => {
          console.log("chooseImage fail", err);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.body {
  font-family: PingFang-SC-Regular;
}
image,
swiper,
.img-view {
  width: 750upx;
  height: 500upx;
}
.page-section-title {
  margin-top: 50upx;
}
.uni-common-mt {
  background: #fff;
  //   margin-top: 100upx;
  margin: 0;
  .more {
    color: #007bc3;
    font-size: 30upx;
    margin: 10upx 0;
    // line-height: 40upx;
    text-align: center;
    font-weight: 500;
    font-size: 30upx;
  }
  .nichen {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34upx;
    .name {
      color: #fff;
      font-size: 34upx;
    }
    // input {
    //   // font-size: 33upx;
    //   width: 200upx;
    //   font-size: 33upx;
    // }
    text {
      font-size: 34upx;
      color: white !important;
      margin-left: 10upx;
    }
  }
  // .showmy {
  //   font-size: 11px;
  //   color: #007bc3;
  //   font-weight: 600;
  //   padding-right: 14px;
  // }

  .paddingmyshow {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20upx;
    // font-size: 33upx;
    color: #a8a8a7;
    border-bottom: 1px solid rgba(236, 236, 236, 1);
    font-size: 28upx;
    font-family: PingFang-SC-Regular;
    font-weight: 400;

    view {
      margin-left: 40upx;
      font-size: 33upx;
      // color: #24211d;
      color: rgba(51, 51, 51, 1);
    }
    .uni-icon-leftjiantou2 {
      font-size: 30upx;
      font-weight: 600;
      text-align: right;
    }
    .xingm {
      padding-left: 30upx;
    }
    .xingm_sex {
      padding-left: 86upx;
    }
  }
  .paddingmyshow_1 {
    display: flex;
    justify-content: space-between;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
  .paddingmyshow_more {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 28upx;
    font-weight: 400;
    color: rgba(59, 107, 171, 1);
  }
}
.small-img {
  // border: 1px solid #eee;
  position: absolute;
  left: 50%;
  // top: 50upx;
  transform: translate(-50%, -103%);
  text-align: center;
  // width: 270upx;
  // height: 202upx;

  image {
    // width: 100%;
    // height: 100%;
    width: 132upx;
    height: 132upx;
    border-radius: 6px;
  }
}
.uni-title_1 {
  padding: 0;
}
.uni-title {
  text-align: center;
  color: #fff;
  .nichen {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34upx;
    .name {
      color: #fff;
      font-size: 36upx;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 42px;
    }
    // input {
    //   // font-size: 33upx;
    //   width: 200upx;
    //   font-size: 33upx;
    // }
    text {
      font-size: 34upx;
      color: white;
      margin-left: 10upx;
    }
  }
  .showmy {
    font-size: 24upx;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    // padding-right: 14px;
    // padding-right: 6upx;
    text {
      padding-left: 16upx;
    }
  }
}
.phto {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  background: #fff;
  height: 100upx;
  padding: 0 20upx;
  font-size: 50upx;
  .phto_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text {
      padding-left: 20upx;
      font-size: 32upx;
      font-weight: 400;
      color: rgba(82, 153, 247, 1);
      line-height: 42px;
    }
  }
  .uni-icon-leftjiantou2 {
    padding-left: 0 !important;
  }
  image {
    width: 50upx;
    height: 40upx;
  }
}
.photo_2 {
  width: 72upx;
  height: 72upx;
  border-radius: 50%;
  background: #a8a8a7;
  text-align: center;
  // display: flex;
  // jus
}
.pickphoto {
  text-align: center;
  width: 100%;
  margin: 60upx auto;
}
.popup-item {
  height: 100upx;
  line-height: 100upx;
  background: #fff;
  &:nth-last-of-type(1) {
    margin-top: 10upx;
  }
}
.border-none {
  border: none;
}

.demo {
  background: #fff;
  // padding: 50upx;
  .image {
    width: 100upx;
    height: 600upx;
  }
}

.grace-list {
  padding: 0;
  // height: 82upx;
}
.grace-list .items .title {
  width: 100%;
  margin-left: 18px;
  padding: 10px 30px 10px 0;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  border-bottom: 1px solid #e9e9e9;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.grace-list .items .arrow-right {
  font-family: "grace-iconfont" !important;
  font-size: 18px;
  font-style: normal;
  height: 42px;
  line-height: 42px;
  text-align: center;
  width: 30px;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
}
// 个人生活朋友圈

.grace-padding {
  padding-left: 4%;
  width: 96%;
  background: #fff;
  margin-top: 5px;
}
.Personal-circle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;

  .myinfo-date {
    display: flex;
    align-items: center;
    height: 120upx;
  }
  .my-date-name {
    margin-left: 11upx;
    view:nth-child(1) {
      font-size: 32upx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    view:nth-child(2) {
      font-size: 24upx;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
  }
  .my-tx {
    width: 80upx;
    height: 80upx;
    border-radius: 50%;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .praise {
    display: flex;
    text-align: center;
    align-items: center;
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
    font-size: 28upx;
    height: 75upx;
    view:nth-child(1) {
      flex: 1;
    }
    view:nth-child(2) {
      flex: 1;
    }
    .zan {
      display: inline-block;
      width: 30upx;
      height: 30upx;
      line-height: 30upx;
      vertical-align: middle;
      background-image: url("../../../static/yfb/my/zan@2x.png");
      background-size: cover;
      margin-right: 12upx;
    }
    .pinglun {
      display: inline-block;
      width: 34upx;
      height: 30upx;
      line-height: 30upx;
      vertical-align: middle;
      background-image: url("../../../static/yfb/my/pinglun@2x.png");
      background-size: cover;
      margin-right: 12upx;
    }
  }
}
.dynamic-life {
  .my-xinqing {
    padding: 27upx 0;
    font-size: 28upx;
    font-weight: 400;
    color: rgba(75, 75, 75, 1);
  }
}
.circle-iamge {
  display: flex;
  view {
    width: 400upx;
    height: 300upx;
    background: red;
    // margin-right: 14px;
  }
}
.grace-scroll-x .grace-items {
  margin: 0;
  margin-right: 5px;
  border-radius: 6px;
}
// 个人生活朋友圈 结束
</style>
